import Taro from '@tarojs/taro';
import React, { useEffect } from 'react';
import { MaterialIcons } from 'taro-icons';
import { View, Text, Input, Button } from '@tarojs/components';

import { useAppContext } from '../../contexts/AppContext';
import { getUserProgressStepApi, setUserProgressStepStatusApi } from '../../api/myself';

import './index.scss';

/**
 * 用户课程页面
 * 与web端保持一致的UI设计
 */
const UserCoursePage: React.FC = () => {
  const { setCarSubjectStepProcessStatus } = useAppContext();
  const stepId = Taro.getCurrentInstance().router?.params?.stepId;
  const subjectId = Taro.getCurrentInstance().router?.params?.tab || '1';

  const navigateToPage = (path: string) => {
    Taro.navigateTo({
      url: path
    });
  };

  const setUserStepStatusApi = async () => {
    await setUserProgressStepStatusApi(Number(stepId), 1).then(res => {
      if(res.code === 200) {
        Taro.showToast({ title: '设置成功', icon: 'success' });
        setCarSubjectStepProcessStatus(Number(stepId), 1);
      }
    })
  }

    // 获取初始化信息
  const getInitInfoData = async () => {
    try {
      const res = await getUserProgressStepApi(Number(stepId));
      if(res.code === 200 && res.data.length == 1) {
        const result = res.data[0];
        if (result.status === 1) {
          Taro.showToast({ title: '您已完成该科目的模拟考试，出去放松一下吧~', icon: 'success' });
        }
      }
    } catch(err) {
      console.log(err);
      Taro.showToast({ title: '获取用户进度失败', icon: 'none' });
    }
  }

  const completedMockTest = async () => {
    try {
      await setUserStepStatusApi();
    } catch(err) {
      console.log(err);
      Taro.showToast({ title: '设置失败，请稍后重试~', icon: 'none' });
    }
  }

  const onClickFunc = async () => {
    Taro.showToast({ title: '开发中，近期开放，敬请期待~', icon: 'none' });
  }

  useEffect(() => {
    getInitInfoData();
  }, []);

  return (
    <View className="page-container">
      <View className="user-course-search-container">
        <MaterialIcons name="search" color="#1890ff" size={32} />
        <Input
          placeholder="AI 解题"
          className="user-course-search-input"
        />
      </View>

      {/* 主要内容区域 */}
      <View className="user-course-main-content">
        {/* 顺序练习卡片 */}
        <View 
          className="user-course-course-card blue"
          onClick={onClickFunc} // () => navigateToPage('/pages/sequential-practice/index')}
        >
          <View className="user-course-card-content">
            <View className="user-course-card-icon-container">
              <MaterialIcons name="list" color="#ffffff" size={32} />
            </View>
            <View className="user-course-card-text-container">
              <Text className="user-course-card-title">顺序练习</Text>
              <Text className="user-course-card-subtitle">0/1100 题</Text>
            </View>
          </View>
        </View>

        {/* 模拟考试卡片 */}
        <View 
          className="user-course-course-card green"
          onClick={onClickFunc} // () => navigateToPage('/pages/mock-exam/index')}
        >
          <View className="user-course-card-content">
            <View className="user-course-card-icon-container">
              <MaterialIcons name="assessment" color="#ffffff" size={32} />
            </View>
            <View className="user-course-card-text-container">
              <Text className="user-course-card-title">模拟考试</Text>
              <Text className="user-course-card-subtitle">最近得分: 100分</Text>
            </View>
          </View>
        </View>

        {/* 错题收藏和专项练习卡片 */}
        <View className="user-course-card-grid">
          {/* 错题收藏卡片 */}
          <View 
            className="user-course-course-card orange"
            onClick={onClickFunc} // () => navigateToPage('/pages/error-collection/index')}
          >
            <MaterialIcons name="warning" color="#ffffff" size={32} />
            <Text className="user-course-card-title user-course-grid-card-title">错题收藏</Text>
          </View>

          {/* 专项练习卡片 */}
          <View 
            className="user-course-course-card yellow"
            onClick={onClickFunc} // () => navigateToPage('/pages/special-practice/index')}
          >
            <MaterialIcons name="filter-list" color="#ffffff" size={32} />
            <Text className="user-course-card-title user-course-grid-card-title">专项练习</Text>
          </View>
        </View>
      </View>

      {/* 底部完成模拟按钮 */}
      <View className="user-course-fixed-bottom">
        <Button
          className="user-course-complete-mock-btn"
          onClick={completedMockTest}
        >
          <MaterialIcons name="check-circle" color="#ffffff" size={32} />
          <Text className="user-course-btn-text">完成模拟</Text>
        </Button>
      </View>
    </View>
  );
};

export default UserCoursePage;